<!-- 历史卡片 -->
<template>
    <div
        class="history_card"
        @click="onJumpLink">
        <div class="img_container">
            <van-image
                :class="['img', `img_${index}`]"
                v-for="(item, index) in pageResource.slice(0, 3)"
                :key="index"
                :src="item.resourcePoster"
                fit="cover" />
        </div>
        <div class="subtitle">{{ pageTitle || '' }}</div>
    </div>
</template>

<script lang="ts" setup>
    import { onMounted } from 'vue';
    import type { Resource } from '../types';

    const props = withDefaults(
        defineProps<{
            pageTitle: string;
            pageH5Url?: string;
            pageResource?: Resource[];
        }>(),
        {
            pageTitle: '',
            pageH5Url: '',
            pageResource: () => [],
        }
    );

    const emit = defineEmits(['onJumpLink']);

    function onJumpLink() {
        emit('onJumpLink', props.pageH5Url);
    }
    onMounted(() => {});
</script>
<style lang="scss" scoped>
    .history_card {
        position: relative;
        margin-bottom: 40px;
        width: 318px;
        height: 382px;
        .img_container {
            position: relative;
            width: 318px;
            .img {
                position: absolute;
                border-radius: 12px !important;
                overflow: hidden;
                &.img_0 {
                    width: 260px;
                    height: 296px;
                    overflow: hidden;
                    z-index: 3;
                }
                &.img_1 {
                    top: 20px;
                    right: 30px;
                    width: 226px;
                    height: 254px;
                    z-index: 2;
                }
                &.img_2 {
                    top: 42px;
                    right: 0px;
                    width: 188px;
                    height: 212px;
                    z-index: 1;
                }
            }
        }
        .subtitle {
            position: absolute;
            bottom: 0px;
            font-weight: 400;
            font-size: 32px;
            line-height: 38px;
            letter-spacing: -0.025em;
            color: rgba(255, 255, 255, 0.9);
            @include lineClamp(2);
        }
    }
</style>
